<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<div>
				<component :is="com"></component>
			</div>
			
			<button @click="chooseContent(1)">首页</button>
			<button @click="chooseContent(2)">列表</button>
			<button @click="chooseContent(3)">新闻</button>
			<button @click="chooseContent(4)">个人</button>
		</div>

		<script type="text/javascript">
			let com1 = Vue.component('index-com',{
				name:'index',
				// 可以给组件定义名字，在is的值上使用
				template:`<h1>首页内容</h1>`
			})
			let com2 = Vue.component('list-com',{
				template:`<h1>列表内容</h1>`
			})
			let com3 = Vue.component('new-com',{
				template:`<h1>新闻内容</h1>`
			})
			let com4 = Vue.component('me-com',{
				template:`<h1>个人内容</h1>`
			})
			
			var app = new Vue({
				el:"#app",
				data:{
					com:com1,
				},
				methods:{
					chooseContent:function(id){
						// 通过获取id来选择注册的组件
						this.com = this.$options.components['com'+id]
					}
				},
				components:{
					com1,com2,com3,com4
				}
			})
		</script>
	</body>
</html>
